<template>
  <div class="payment-history">
    <div class="history-header">
      <h2>支付记录</h2>
    </div>

    <!-- 搜索表单 -->
    <el-card class="search-card">
      <el-form :model="searchForm" inline>
        <el-form-item label="订单号">
          <el-input v-model="searchForm.orderNo" placeholder="请输入订单号" clearable />
        </el-form-item>
        <el-form-item label="支付方式">
          <el-select v-model="searchForm.payType" placeholder="请选择支付方式" clearable>
            <el-option label="支付宝" value="alipay" />
            <el-option label="微信支付" value="wechat" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option :value="0" label="待支付" />
            <el-option :value="1" label="已支付" />
            <el-option :value="2" label="已取消" />
            <el-option :value="3" label="支付失败" />
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            @change="handleDateChange"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
            查询
          </el-button>
          <el-button @click="resetSearch">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <el-table :data="paymentRecords" style="width: 100%" v-loading="loading">
      <el-table-column prop="orderNo" label="订单号" width="220" />
      <el-table-column label="套餐名称" width="150">
        <template #default="scope">
          {{ getPackageName(scope.row.packageId) }}
        </template>
      </el-table-column>
      <el-table-column label="支付金额" width="120">
        <template #default="scope">
          <span class="amount">￥{{ Number(scope.row.amount).toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付方式" width="120">
        <template #default="scope">
          <el-tag :type="scope.row.transactionId ? 'success' : 'primary'">
            {{ scope.row.transactionId ? '微信支付' : '支付宝' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100">
        <template #default="scope">
          <el-tag :type="getStatusType(scope.row.status)">
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="180">
        <template #default="scope">
          {{ formatDate(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="支付时间" width="180">
        <template #default="scope">
          {{ formatDate(scope.row.payTime) }}
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        v-model:currentPage="currentPage"
        v-model:pageSize="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :small="false"
        :disabled="false"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const { proxy } = getCurrentInstance()

const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const paymentRecords = ref([])
const dateRange = ref([])

// 搜索表单
const searchForm = reactive({
  orderNo: '',
  payType: '',
  status: null,
  startTime: '',
  endTime: ''
})

// 套餐名称映射
const packageMap = {
  'PKG0000001': '基础套餐',
  'PKG0000002': '进阶套餐',
  'PKG0000003': '专业套餐',
  'PKG0000004': '基础年套餐',
  'PKG0000005': '进阶年套餐',
  'PKG0000006': '专业年套餐'
}

// 获取套餐名称
const getPackageName = (packageId) => {
  return packageMap[packageId] || packageId
}

// 获取状态类型
const getStatusType = (status) => {
  const statusMap = {
    0: 'info',    // 待支付
    1: 'success', // 已支付
    2: 'danger',  // 已取消
    3: 'warning'  // 支付失败
  }
  return statusMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '待支付',
    1: '已支付',
    2: '已取消',
    3: '支付失败'
  }
  return statusMap[status] || '未知'
}

// 处理日期范围变化
const handleDateChange = (val) => {
  if (val) {
    searchForm.startTime = val[0]
    searchForm.endTime = val[1]
  } else {
    searchForm.startTime = ''
    searchForm.endTime = ''
  }
}

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return '-'
  return dateStr
}

// 加载支付记录
const loadPaymentRecords = async () => {
  loading.value = true
  try {
    console.log('发送请求参数:', {
      ...searchForm,
      pageNo: currentPage.value,
      pageSize: pageSize.value
    })

    const result = await proxy.Request({
      url: '/admin/payment/list',
      params: {
        ...searchForm,
        pageNo: currentPage.value,
        pageSize: pageSize.value
      }
    })
    
    if (result && result.code === 200 && result.data) {
      console.log('支付记录数据:', result.data)
      const { list, total: totalCount } = result.data
      if (Array.isArray(list)) {
        paymentRecords.value = list
        total.value = totalCount || 0
      } else {
        console.error('返回的list不是数组:', list)
        paymentRecords.value = []
        total.value = 0
      }
    } else {
      console.error('请求响应异常:', result)
      paymentRecords.value = []
      total.value = 0
      ElMessage.error(result?.info || '获取支付记录失败')
    }
  } catch (error) {
    console.error('获取支付记录失败:', error)
    ElMessage.error('获取支付记录失败')
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  currentPage.value = 1
  loadPaymentRecords()
}

// 重置搜索
const resetSearch = () => {
  searchForm.orderNo = ''
  searchForm.payType = ''
  searchForm.status = null
  searchForm.startTime = ''
  searchForm.endTime = ''
  dateRange.value = []
  handleSearch()
}

// 处理页码改变
const handleCurrentChange = (page) => {
  currentPage.value = page
  loadPaymentRecords()
}

// 处理每页条数改变
const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
  loadPaymentRecords()
}

onMounted(() => {
  loadPaymentRecords()
})
</script>

<style lang="scss" scoped>
.payment-history {
  padding: 20px;

  .history-header {
    margin-bottom: 20px;

    h2 {
      font-size: 24px;
      color: #333;
      margin: 0;
    }
  }

  .search-card {
    margin-bottom: 20px;
    border: none;
    background: linear-gradient(to right, #fff, #fafafa);
    transition: all 0.3s;
    
    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
  }

  .amount {
    color: #f701ff;
    font-weight: 500;
  }

  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }

  :deep(.el-tag) {
    border-radius: 4px;
    
    &.el-tag--primary {
      background-color: rgba(64, 158, 255, 0.1);
      border-color: rgba(64, 158, 255, 0.2);
      color: #409EFF;
    }
    
    &.el-tag--success {
      background-color: rgba(103, 194, 58, 0.1);
      border-color: rgba(103, 194, 58, 0.2);
      color: #67C23A;
    }
    
    &.el-tag--info {
      background-color: rgba(144, 147, 153, 0.1);
      border-color: rgba(144, 147, 153, 0.2);
      color: #909399;
    }
    
    &.el-tag--warning {
      background-color: rgba(230, 162, 60, 0.1);
      border-color: rgba(230, 162, 60, 0.2);
      color: #E6A23C;
    }
    
    &.el-tag--danger {
      background-color: rgba(245, 108, 108, 0.1);
      border-color: rgba(245, 108, 108, 0.2);
      color: #F56C6C;
    }
  }
}
</style> 